<template>
  <el-container class="pt-2 h-100" v-loading="model.loading">
    <!-- <el-aside width="200px">Aside</el-aside> -->
    <el-main class="p-0" v-if="!row">
      <el-table :data="model.rows">
        <el-table-column label="序号" type="index" min-width="50" align="center"></el-table-column>
        <el-table-column prop="cityAreaName" label="地市" align="center"></el-table-column>
        <el-table-column prop="name" label="三调办名称" align="center"></el-table-column>
        <el-table-column prop="head" label="负责人" align="center"></el-table-column>
        <el-table-column prop="mobile" label="电话" align="center"></el-table-column>
        <el-table-column prop="teamCount" label="下属小组数" align="center"></el-table-column>
        <el-table-column prop="userCount" label="总人数" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip content="查看详情" placement="top">
              <i
                class="el-icon-document"
                style="font-size: 1.2rem;"
                @click="checkRow(scope.row)"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-show="model.rows.length > 0"
        class="text-right py-3 pr-5 bg-white"
        @size-change="handleSizeChange"
        @current-change="val => this.model.pageLoad(val)"
        :current-page.sync="model.pageIndex"
        :page-sizes="[20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="model.count"
        :pager-count="7"
      >
      </el-pagination>
    </el-main>
    <el-main v-else class="p-0 h-100">
      <country-detail :row="row" @back="row=null"></country-detail>
    </el-main>
  </el-container>
</template>
<script>
import PagedList from "../../../libs/PagedList";
import CountryDetail from "./CountryDetail";
export default {
  name: 'coutry',
  title: '区县三调办',
  components: { CountryDetail },
  data() {
    return {
      model: new PagedList("survey/office/getCityOrAreaSurveyUnitInfo", 20, {type: 2}),
      row: null
    }
  },
  mounted () {
    this.newSearch()
  },
  methods: {
    newSearch() {
      this.model.search()
    },
    handleSizeChange (pageSize ) {
      this.model.pageSize = pageSize
      this.newSearch();
    },
    checkRow (row) {
      this.row = row
    }
  }
}
</script>
<style lang='scss'>
</style>